{{define "title"}}CrIA v2{{end}}

{{define "content"}}

<script type="text/javascript" src="/static/js/groups.js"></script>

<template id="group-scroller-row-template">
  <li class="list-group-item">
    <p class="fw-bold fs-6 mb-0">
    </p>
    <small class="mb-0">
    </small>
  </li>
</template>

<template id="new-group-form-template">
  <div class="row mx-0 my-2">
    <div class="col m-0 pt-1 border rounded" style="background-color: #f5f5f5;">
      <h5 class="d-flex">
        <a class="p-1 text-decoration-none flex-grow-1 bd-highlight" id="group-heading" style="color: #333">Create new group</a>
      </h5>
    </div>
  </div>
  <form id="group-form" class="m-2">
    <div class="row mb-3">
      <label for="group-name" class="col-2 col-form-label">Group Name</label>
      <div class="col">
        <input class="form-control groupName required" rows="1" id="group-name-box" placeholder="required"></input>
        <span class="error" aria-live="polite"></span>
      </div>
    </div>
    <div class="row mb-3">
      <label for="description" class="col-2 col-form-label">Description</label>
      <div class="col">
        <textarea class="form-control required" rows="3" id="description-box" placeholder="required"></textarea>
        <span class="error" aria-live="polite"></span>
      </div>
    </div>
    <div class="row">
      <label for="owners" class="col-2 col-form-label">Owners</label>
      <div class="col">
        <textarea class="form-control groupNameOrEmpty" rows="1" id="owners-box"></textarea>
        <span class="error" aria-live="polite"></span>
      </div>
    </div>
    <hr>
    <div class="row mb-3">
      <label for="members" class="col-2 col-form-label">Members</label>
      <div class="col">
        <textarea class="form-control membersAndGlobsList" rows="12" id="membersAndGlobs"></textarea>
        <span class="error" aria-live="polite"></span>
      </div>
    </div>
    <div class="row">
      <label for="subgroups" class="col-2 col-form-label">Subgroups</label>
      <div class="col">
        <textarea class="form-control groupList" rows="5" id="nested"></textarea>
        <span class="error" aria-live="polite"></span>
      </div>
    </div>
    <hr>
    <button type="submit" class="btn btn-primary">Create group</button>
  </form>
</template>

<template id="edit-group-form-template">
  <div class="row mx-0 my-2">
    <div class="col m-0 pt-1 border rounded" style="background-color: #f5f5f5;">
      <h5 class="d-flex">
        <a class="p-1 text-decoration-none flex-grow-1 bd-highlight" id="group-heading" style="color: #333">group name</a>
        <a class="p-1" href="#">
          <i class="bi bi-list-ul" style="font-size: 16px; color: #333"></i>
        </a>
        <a class="p-1" href="#">
          <i class="bi bi-search" style="font-size: 16px; color: #333"></i>
        </a>
        <a class="p-1" href="#">
          <i class="bi bi-calendar3" style="font-size: 16px; color: #333"></i>
        </a>
      </h5>
    </div>
  </div>
  <form id="group-form" class="m-2">
    <div class="row mb-3">
      <label for="description" class="col-2 col-form-label">Description</label>
      <div class="col">
        <textarea class="form-control required" rows="3" id="description-box"></textarea>
        <span class="error" aria-live="polite"></span>
      </div>
    </div>
    <div class="row">
      <label for="owners" class="col-2 col-form-label">Owners</label>
      <div class="col">
        <textarea class="form-control groupNameOrEmpty" rows="1" id="owners-box"></textarea>
        <span class="error" aria-live="polite"></span>
      </div>
    </div>
    <hr>
    <div class="row mb-3">
      <label for="members" class="col-2 col-form-label">Members</label>
      <div class="col">
        <textarea class="form-control membersAndGlobsList" rows="12" id="membersAndGlobs"></textarea>
        <span class="error" aria-live="polite"></span>
      </div>
    </div>
    <div class="row">
      <label for="subgroups" class="col-2 col-form-label">Subgroups</label>
      <div class="col">
        <textarea class="form-control groupList" rows="5" id="nested"></textarea>
        <span class="error" aria-live="polite"></span>
      </div>
    </div>
    <hr>
    <button type="submit" class="btn btn-primary">Update group</button>
    <button id="delete-btn" type="button" class="btn btn-danger">Delete group</button>
  </form>
</template>

<div class="row">
  <div class="col-4 my-2 border rounded">
    <div class="row my-2">
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
      <div class="row pt-2">
        <div class="col">
          <div class="form-check pt-2 sm-6">
            <input class="form-check-input me-2" type="checkbox" value="" id="external-check">
            <label class="form-check-label" for="external-check">
              Show External Groups
            </label>
          </div>
        </div>
        <div class="col-2 me-2">
          <button type="button" class="btn btn-outline-primary" id="create-group-btn">Create</button>
        </div>
      </div>
    </div>
    <div class="row">
      <ul class="navbar-nav-scroll px-1" style="--bs-scroll-height: 704px;" id="group-chooser">
          <!-- Load group-scroller-row template. -->
      </ul>
    </div>
  </div>
  <div class="col my-2 ms-2 border rounded" id="group-content">
    <!-- Load group-form template here -->
  </div>
</div>

{{end}}

